<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/cart.css">
</head>

<body>
    <!-- 分类界面导航栏 -->
    <div class="nav">
        <img src="imgs/logo_files/logo.png" alt="" class="logo">
        <!-- 分类导航 -->
        <div class="nav-c">
            <ul class="cloth-nav">
                <li class="cloth-category">
                    <a href="#" class="homepage">首页</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">女装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">男装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">箱包</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">配饰</a>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="cart-area">
                <input type="cart" class="cart-text" placeholder="我的购物车">
                <span class="cart-num">11</span>
            </div>
            <div class="right-icon">
                <a href="" class="setting"></a>
            </div>
        </div>

    </div>
    <!-- 购物车详情 -->
    <div class="cart">
        <!-- 购物车商品头部信息 -->
        <div class="product-information">
            <div class="product-radio"></div>
            <ul class="detail-information">
                <li class="deproduct product-data">商品信息</li>
                <li class="deproduct size-color">尺码/颜色</li>
                <li class="deproduct product-price">价格</li>
                <li class="deproduct product-num">数量</li>
                <li class="deproduct sum-price">小计</li>
                <li class="deproduct operate">操作</li>
            </ul>
        </div>
        <!-- 购物车商品详情 -->
        <div class="product-item">
            <div class="product-radio">
                <span class="checked">√</span>
            </div>
            <a href="" class="product-img"></a>
            <ul class="product-list">
                <li class="product-list-item">
                    <p class="product-name">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                </li>
                <li class="product-list-item">
                    <p class="after-sales">支持30天无理由退换货</p>
                </li>
            </ul>
            <ul class="product-sc">
                <li class="product-list-sc">
                    <p class="product-size">尺码：155/80A/S</p>
                </li>
                <li class="product-list-sc">
                    <p class="product-color">颜色：69&nbsp;&nbsp;藏青色</p>
                </li>
            </ul>
            <span class="product-price1">￥1699</span>
            <a href="#" class="btn-ins">+</a>
            <input type="text" class="input-count">
            <a href="#" class="btn-desc">-</a>
            <span class="product-price2">￥1699</span>
            <ul class="btn-list">
                <li class="btn-item"><button class="cart-btn btn-collection">移入收藏夹</button></li>
                <li class="btn-item"><button class="cart-btn btn-del">删除</button></li>
            </ul>
        </div>
        <div class="step-line"></div>
        <div class="product-item">
            <div class="product-radio">
                <span class="checked">√</span>
            </div>
            <a href="" class="product-img"></a>
            <ul class="product-list">
                <li class="product-list-item">
                    <p class="product-name">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                </li>
                <li class="product-list-item">
                    <p class="after-sales">支持30天无理由退换货</p>
                </li>
            </ul>
            <ul class="product-sc">
                <li class="product-list-sc">
                    <p class="product-size">尺码：155/80A/S</p>
                </li>
                <li class="product-list-sc">
                    <p class="product-color">颜色：69&nbsp;&nbsp;藏青色</p>
                </li>
            </ul>
            <span class="product-price1">￥1699</span>
            <a href="#" class="btn-ins">+</a>
            <input type="text" class="input-count">
            <a href="#" class="btn-desc">-</a>
            <span class="product-price2">￥1699</span>
            <ul class="btn-list">
                <li class="btn-item"><button class="cart-btn btn-collection">移入收藏夹</button></li>
                <li class="btn-item"><button class="cart-btn btn-del">删除</button></li>
            </ul>
        </div>
        <div class="step-line"></div>
        <div class="product-item">
            <div class="product-radio">
                <span class="checked">√</span>
            </div>
            <a href="" class="product-img"></a>
            <ul class="product-list">
                <li class="product-list-item">
                    <p class="product-name">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                </li>
                <li class="product-list-item">
                    <p class="after-sales">支持30天无理由退换货</p>
                </li>
            </ul>
            <ul class="product-sc">
                <li class="product-list-sc">
                    <p class="product-size">尺码：155/80A/S</p>
                </li>
                <li class="product-list-sc">
                    <p class="product-color">颜色：69&nbsp;&nbsp;藏青色</p>
                </li>
            </ul>
            <span class="product-price1">￥1699</span>
            <a href="#" class="btn-ins">+</a>
            <input type="text" class="input-count">
            <a href="#" class="btn-desc">-</a>
            <span class="product-price2">￥1699</span>
            <ul class="btn-list">
                <li class="btn-item"><button class="cart-btn btn-collection">移入收藏夹</button></li>
                <li class="btn-item"><button class="cart-btn btn-del">删除</button></li>
            </ul>
        </div>
        <div class="step-line"></div>
        <div class="product-item">
            <div class="product-radio">
                <span class="checked">√</span>
            </div>
            <a href="" class="product-img"></a>
            <ul class="product-list">
                <li class="product-list-item">
                    <p class="product-name">【设计师合作款】女装 +J 双面呢大衣(外套) 446355</p>
                </li>
                <li class="product-list-item">
                    <p class="after-sales">支持30天无理由退换货</p>
                </li>
            </ul>
            <ul class="product-sc">
                <li class="product-list-sc">
                    <p class="product-size">尺码：155/80A/S</p>
                </li>
                <li class="product-list-sc">
                    <p class="product-color">颜色：69&nbsp;&nbsp;藏青色</p>
                </li>
            </ul>
            <span class="product-price1">￥1699</span>
            <a href="#" class="btn-ins">+</a>
            <input type="text" class="input-count">
            <a href="#" class="btn-desc">-</a>
            <span class="product-price2">￥1699</span>
            <ul class="btn-list">
                <li class="btn-item"><button class="cart-btn btn-collection">移入收藏夹</button></li>
                <li class="btn-item"><button class="cart-btn btn-del">删除</button></li>
            </ul>
        </div>
        <div class="step-line"></div>
        <!-- 购物车底部信息 -->
        <div class="product-information product-footer">
            <div class="product-radio"></div>
            <ul class="detail-information">
                <li class="deproduct all">全选</li>
                <li class="deproduct del">删除</li>
                <li class="deproduct move">移入收藏夹</li>
                <li class="deproduct product-sprice">总价：<span class="sumprice">¥5097.00</span></li>
                <li class="deproduct pay-price"><a href="#" class="pay"></a></li>
            </ul>
        </div>
    </div>

</body>

</html>